<!--
 * @Author: your name
 * @Date: 2020-08-22 01:51:42
 * @LastEditTime: 2020-08-27 14:45:33
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \exam-list\src\components\checkpaper\PaperDetail.vue
-->
<template>
  <div>
    <h2>班级管理</h2>
    <card>
      <Button type="primary" @click="addRoom">+添加班级</Button>
      <Table border :columns="columns12" :data="AllList">
        <template slot-scope="{ row }" slot="name">
          <strong>{{ row.name }}</strong>
        </template>
        <template slot-scope="{ row }" slot="action">
          <Button type="primary" size="small" style="margin-right: 5px" @click="show(row)">编辑</Button>
          <Button type="error" size="small" @click="remove(row)">删除</Button>
        </template>
      </Table>
      <Modal v-model="modal1" title="新增/编辑" @on-ok="ok" @on-cancel="cancel">
        <Form ref="formValidate" :model="obj" :label-width="80">
          <FormItem label="班级名" prop="grade_name">
            <Input v-model="obj.grade_name" placeholder="Enter your name"></Input>
          </FormItem>
          <FormItem label="课程名" prop="subject_text">
            <Select v-model="obj.subject_text" placeholder="Select your city">
              <Option
                v-for="(item) in AllList"
                :key="item.grade_id"
                :value="item.subject_text"
              >{{item.subject_text}}</Option>
            </Select>
          </FormItem>
          <FormItem label="教室号" prop="room_text">
            <Select v-model="obj.room_text" placeholder="教室名">
              <Option
                v-for="(item) in AllList"
                :key="item.grade_id"
                :value="item.room_text"
              >{{item.room_text}}</Option>
            </Select>
          </FormItem>
        </Form>
      </Modal>
    </card>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  data() {
    return {
      modal1: false,
      // 判断是添加还是编辑
      type: '',
      obj: {
        grade_name: '',
        room_text: '',
        subject_text: ''
      },
      columns12: [
        {
          title: '班级名',
          key: 'grade_name',
          align: 'center'
        },
        {
          title: '课程名',
          key: 'subject_text',
          align: 'center'
        },
        {
          title: '教室号',
          key: 'room_text',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          width: 250,
          align: 'center'
        }
      ]
    }
  },
  methods: {
    ...mapActions('Grade', ['GetAllList', 'addList', 'editList', 'deleteList']),
    // 点击编辑
    show(row) {
      console.log(row)
      this.type = 'edit'
      this.modal1 = true
      this.obj.grade_name = row.grade_name
      this.obj.room_text = row.room_text
      this.obj.subject_text = row.subject_text
    },
    // 点击删除
    remove(row) {
      const obj = {
        grade_id: row.grade_id
      }
      this.deleteList(obj)
      this.GetAllList()
    },
    // 点击确定
    ok() {
      if (this.type === 'add') {
        this.addList(this.obj)
      } else if (this.type === 'edit') {
        this.editList(this.obj)
      }
      this.GetAllList()
    },
    // 点击添加班级
    addRoom() {
      this.modal1 = true
      this.type = 'add'
      this.obj = {}
    },
    // 点击取消
    cancel() {
      this.$Message.info('取消操作')
    }
  },
  computed: {
    ...mapState('Grade', ['AllList'])
  },
  created() {
    this.GetAllList()
  }
}
</script>

<style lang="scss" scoped>
</style>
